import './index.less';
import React, { memo, useEffect, useState } from 'react';

// 导入编辑器的样式
// import 'github-markdown-css/github-markdown.css'; // GitHub 风格的 Markdown 默认样式
import ReactMarkdown from 'react-markdown'; // 将 Markdown 文本渲染为 React 组件的核心库
import rehypeKatex from 'rehype-katex'; // 支持 LaTeX 数学公式渲染的插件
import rehypeRaw from 'rehype-raw'; // 解析 HTML 标签，允许 Markdown 中使用原生 HTML
import remarkGfm from 'remark-gfm'; // 支持 GitHub Flavored Markdown 语法扩展（表格、删除线、任务列表等）
import remarkMath from 'remark-math'; // 解析 LaTeX 数学公式语法

import rehypePrism from 'rehype-prism-plus'; // 代码语法高亮插件，基于 Prism.js
import 'prismjs/themes/prism.css'; // Prism.js 代码高亮的默认主题样式

import slug from 'rehype-slug'; // 为标题元素自动添加 id 属性，用于锚点链接
import { visit } from 'unist-util-visit'; // 用于遍历和操作 Markdown AST（抽象语法树）的工具函数

interface Iprops {
  content: string;
}

// 提取标题的 remark 插件
const remarkToc = () => {
  return (tree: any, file: any) => {
    const titles: { depth: number; value: string; id: string }[] = [];

    visit(tree, ['heading'], (node) => {
      const text = node.children.map((child: any) => child.value || '').join('');
      const id = text
        .toLowerCase()
        .replace(/\s+/g, '-')
        .replace(/[^\w-]+/g, '');
      titles.push({
        depth: node.depth,
        value: text,
        id: id,
      });
    });

    (file as any).titles = titles;
  };
};
const MarkDown: React.FC<Iprops> = (props) => {
  const { content } = props;
  const [titles, setTitles] = useState<{ depth: number; value: string; id: string }[]>([]);
  const showToc = true;

  // 提取标题用于导航
  useEffect(() => {
    if (showToc) {
      // 这里可以使用更复杂的逻辑来提取标题
      // 简化版本：通过正则表达式提取
      const titleRegex = /^(#{1,6})\s+(.*)$/gm;
      const titles: { depth: number; value: string; id: string }[] = [];
      let match;

      while ((match = titleRegex.exec(content)) !== null) {
        const depth = match[1].length;
        const value = match[2];
        const id = value
          .toLowerCase()
          .replace(/\s+/g, '-')
          .replace(/[^\w-]+/g, '');

        titles.push({ depth, value, id });
      }

      setTitles(titles);
    }
  }, [content, showToc]);

  // 生成导航菜单
  const renderToc = () => {
    if (!showToc || titles.length === 0) return null;

    return (
      <div className="markdown-toc">
        <h3>目录</h3>
        <ul>
          {titles.map((title, index) => (
            <li
              key={index}
              style={{
                paddingLeft: title.depth > 1 ? '0px' : '16px',

                listStyleType: title.depth > 1 ? 'circle' : 'disc',
              }}
            >
              <a href={`#${title.value}`}>{title.value}</a>
            </li>
          ))}
        </ul>
      </div>
    );
  };

  return (
  <div className="markdown-container">
      <div className="markdown-body">
        {renderToc()}
        <ReactMarkdown
          remarkPlugins={[
            remarkGfm,                 // GitHub Flavored Markdown 支持
            remarkToc,                 // 自定义插件：提取标题用于目录
            [remarkMath, { singleTilde: false }], // 数学公式支持，禁用单波浪线语法
          ]}
          rehypePlugins={[
            slug,                      // 为标题添加 ID 属性
            rehypeRaw,                 // 解析原生 HTML 标签
            rehypePrism,               // 代码语法高亮
            [rehypeKatex, { output: 'html' }], // 数学公式渲染为 HTML
          ]}
        >
          {content}
        </ReactMarkdown>
      </div>
    </div>
  );
};

export default memo(MarkDown);
